
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/xml" prefix="x"%>
<jsp:useBean id="marshallXMLs" class="Model.marshallXML" scope="request"></jsp:useBean>
<%
            marshallXMLs.marshallRegisters(application.getRealPath("/") + "XML/checkRegister.xml");
%>


        <script type="text/javascript">
            var xmlHttp;
            var xmlDOM;

            var realpath = '${pageContext.request.contextPath}';

            function GetXmlHttpObject(){
                var xmlHttp = null;
                try{
                    xmlHttp = new XMLHttpRequest();
                } catch(e){
                    try {
                        xmlHttp = new ActiveXObject("Msxm12.XMLHTTP");
                    } catch(e){
                        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                }
                return xmlHttp;

            }

            function traversalDOMTree (fileName){
                //load file xml len bo nho o client
                var xmlDom = new ActiveXObject("Microsoft.XMLDOM");
                xmlDom.async = "false";
                xmlDom.load(fileName);

                if(xmlDom.parseError.errorCode != 0){
                    alert("Error: " + xmlDom.parseError.reason);
                } else{
                    flagSearchUsername=false;
                    flagSearchMail = false;
                    flagSearchPhone = false;
                    flagEmptyUsername = false;
                    flagEmptyPassword = true;
                    flagEmptyCPassword = true;
                    flagEmptyMail = false;
                    flagEmptyPhone = false;
                    flagMatchPass = true;
                    flagValidEmail = true;
                    //search tren client
                    searchNode(xmlDom, document.getElementById("txtUsername").value, document.getElementById("txtMail").value, document.getElementById("txtPhone").value);
                    //user
                    if (!flagEmptyUsername)
                    {
                        if(flagSearchUsername)
                        {
                            document.getElementById("txtUser").innerHTML="";
                            document.getElementById("txtUser").innerHTML="<font color='red'>Account was existing</font>";
                        }
                        else {document.getElementById("txtUser").innerHTML="";}
                    } else {
                        document.getElementById("txtUser").innerHTML="";
                        document.getElementById("txtUser").innerHTML="<font color='red'>*</font>";
                    }
                    //ketthuc user
                
                    var pass = document.getElementById("txtPassword").value;
                    if(pass!=""){
                        flagEmptyPassword=false;
                    }
                    if (!flagEmptyPassword)
                    {
                        document.getElementById("txtPass").innerHTML="";
                    }
                    else {
                        document.getElementById("txtPass").innerHTML="";
                        document.getElementById("txtPass").innerHTML="<font color='red'>*</font>";
                    }


                    var cpass = document.getElementById("cf_txtPassword").value;
                    if(cpass!=""){
                        flagEmptyCPassword=false;
                    }
                    
                   
                    if(cpass != pass){
                        flagMatchPass = false;
                        document.getElementById("txtRPass").innerHTML="<font color='red'>Password was not match</font>";
                    } else document.getElementById("txtRPass").innerHTML="";
                     


                    var checkEmail = document.getElementById('txtMail');
                    var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
                    if(!flagEmptyMail){
                        if(flagSearchMail)
                        {
                            document.getElementById("txtEmail").innerHTML="";
                            document.getElementById("txtEmail").innerHTML="<font color='red'>Email was existing</font>";
                        }
                        else if (!filter.test(checkEmail.value)) {
                            flagValidEmail = false;
                            document.getElementById("txtEmail").innerHTML="";
                            document.getElementById("txtEmail").innerHTML="<font color='red'>Email is not valid</font>";
                            
                        } else document.getElementById("txtEmail").innerHTML="";
                    } else {
                        document.getElementById("txtEmail").innerHTML="";
                        document.getElementById("txtEmail").innerHTML="<font color='red'>*</font>";
                    }

                   

                    if (!flagEmptyPhone){
                        if(flagSearchPhone)
                        {
                            document.getElementById("txtPhoneNum").innerHTML="";
                            document.getElementById("txtPhoneNum").innerHTML="<font color='red'>Phone number was existing</font>";
                        }
                        else {document.getElementById("txtPhoneNum").innerHTML="";}
                    } else {
                        document.getElementById("txtPhoneNum").innerHTML="";
                        document.getElementById("txtPhoneNum").innerHTML="<font color='red'>*</font>";
                    }

                    if (!flagSearchPhone && !flagSearchMail && !flagSearchUsername && !flagEmptyPhone
                        && !flagEmptyMail && !flagEmptyUsername && !flagEmptyPassword && !flagEmptyCPassword 
                        && flagMatchPass && flagValidEmail){
                        document.getElementById("btRegister").disabled = false;
                    }
                    else
                        document.getElementById("btRegister").disabled = true;
                }
            }
            
            var flagSearchUsername , flagSearchMail, flagSearchPhone;
            var flagEmptyUsername, flagEmptyMail, flagEmptyPhone;
            function searchNode(node, strSearchName, strSearchMail, strSearchPhone){
                if (node==null){
                    return;
                }
                if (node.tagName == "checkRegister"){
                    if (strSearchName != ""){
                        var rgtN="";
                        rgtN += node.firstChild.childNodes[0].nodeValue;
                    
                        if (rgtN == strSearchName){
                            flagSearchUsername = true;
                        }
                    } else flagEmptyUsername = true;


                    if (strSearchMail != ""){
                        var sibling = node.childNodes[0].nextSibling;
                        var rgtM="";
                        rgtM += sibling.firstChild.nodeValue;

                        if (rgtM == strSearchMail){
                            flagSearchMail = true;
                        }
                    } else flagEmptyMail = true;


                    if(strSearchPhone != ""){
                        var sibling = node.childNodes[1].nextSibling;
                        var rgtP="";
                        rgtP += sibling.firstChild.nodeValue;

                        if (rgtP == strSearchPhone){
                            flagSearchPhone = true;
                        }
                    } else flagEmptyPhone = true;
                }

                var childs = node.childNodes;
                for (var i=0; i < childs.length; i++){
                    searchNode(childs[i], strSearchName, strSearchMail, strSearchPhone);
                }
            }
        </script>

        <script type="text/javascript">

            function reset1(){
                
                document.getElementById("txtUser").innerHTML=" ";
                document.getElementById("txtPass").innerHTML="";
                document.getElementById("txtRPass").innerHTML=" ";
                document.getElementById("txtFname").innerHTML="";
                document.getElementById("txtEmail").innerHTML="";
                document.getElementById("txtPhoneNum").innerHTML="";
                document.getElementById("txtAddr").innerHTML="";
                document.getElementById('txtUsername').value="";
                document.getElementById('txtPassword').value="";
                document.getElementById('cf_txtPassword').value="";
                document.getElementById('txtFullname').value="";
                document.getElementById('txtMail').value="";
                document.getElementById('txtPhone').value="";
                document.getElementById('txtAddress').value="";
                                   
            }
        </script>



        <div id="stylized" class="myform">
            <form action="registerServlet" method="POST" name="myForm">

                <div>
                    <label style="display:block; text-align: left; width:165px; float:left;">Username: </label>
                    <input type="text" name="txtUsername" onblur="traversalDOMTree('./XML/checkRegister.xml')" id="txtUsername" value=""/>
                    <p id="txtUser" style="text-align: left; font-size: 13px;"></p>
                </div>
                <div>
                    <label style="display:block; text-align: left; width:165px; float:left;">Password: </label>
                    <input type="password" name="txtPassword" id="txtPassword" value="" onblur="traversalDOMTree('./XML/checkRegister.xml')"/>
                    <p id="txtPass" style="text-align: left; font-size: 13px;  margin-left: 357px; margin-top: 37px;"></p>
                </div>
                <div>
                    <label style="display:block; text-align: left; width:165px; float:left;">Confirm Password: </label>
                    <input type="password" name="cf_txtPassword" id="cf_txtPassword" value=""  onblur="traversalDOMTree('./XML/checkRegister.xml')"/>
                    <p id="txtRPass" style="text-align: left; font-size: 13px;"></p>
                </div>
                <div>
                    <label style="display:block; text-align: left; width:165px; float:left;">Full Name: </label>
                    <input type="text" name="txtFullname" id="txtFullname" value=""/>
                    <p id="txtFname" style="text-align: left; font-size: 13px; margin-bottom: 55px;"></p>
                </div>
                <div>
                    <label style="display:block; text-align: left; width:165px; float:left;">Email: </label>
                    <input type="text" name="txtMail" id="txtMail" onblur="traversalDOMTree('./XML/checkRegister.xml')" value=""/>
                    <p id="txtEmail" style="text-align: left; font-size: 13px; margin-bottom: 22px;  margin-left: 357px; margin-top: 70px;"></p>
                </div>
                <div>
                    <label style="display:block; text-align: left; width:165px; float:left;">Phone Number: </label>
                    <input type="text" name="txtPhone" id="txtPhone" onblur="traversalDOMTree('./XML/checkRegister.xml')" value=""/>
                    <p id="txtPhoneNum" style="text-align: left; font-size: 13px; margin-bottom: -43px;  margin-left: 357px; margin-top: 0px;"></p>
                </div>
                <div>
                    <label style="display:block; text-align: left; width:165px; float:left;">Address: </label>
                    <input type="text" name="txtAddress" id="txtAddress" value=""/>
                    <p id="txtAddr" style="text-align: left; font-size: 13px;"></p>
                </div>
                <div>
                    <input type="submit" onClick="" name="btRegister" id="btRegister" value="Register" disabled="true" style="margin-top: 70px;"/>
                    <input type="button" value="Reset" onclick="reset1()" style="margin-top: 70px;" />
                </div>
            </form>
        </div>
   
